ngSwitch ( directive in module ng )

Description

The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression. Elements within ngSwitch but without ngSwitchWhen or ngSwitchDefault directives will be preserved at the location as specified in the template.

The directive itself works similar to ngInclude, however, instead of downloading template code (or loading it from the template cache), ngSwitch simply choses one of the nested elements and makes it visible based on which element matches the value obtained from the evaluated expression. In other words, you define a container element (where you place the directive), place an expression on the on="..." attribute (or the ng-switch="..." attribute), define any inner elements inside of the directive and place a when attribute per element. The when attribute is used to inform ngSwitch which element to display when the on expression is evaluated. If a matching expression is not found via a when attribute then an element with the default attribute is displayed.

Additionally, you can also provide animations via the ngAnimate attribute to animate the enter and leave effects.

Usage

as element (see IE restrictions)
<ng-switch
       on="{*}">
</ng-switch>
as attribute
<ANY ng-switch="{*}">
   ...
</ANY>

Directive info

  • This directive creates new scope.

Parameters

Example

selection={{selection}}
Settings Div
Home Span
default
function Ctrl($scope) { $scope.items = ['settings', 'home', 'other']; $scope.selection = $scope.items[0]; } .example-leave-setup, .example-enter-setup { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

position:absolute;
top:0;
left:0;
right:0;
bottom:0;

}

.example-animate-container > * { display:block; padding:10px; }

.example-enter-setup { top:-50px; } .example-enter-start.example-enter-start { top:0; }

.example-leave-setup { top:0; } .example-leave-start.example-leave-start { top:50px; } it('should start in settings', function() { expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Settings Div/); }); it('should change to home', function() { select('selection').option('home'); expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Home Span/); }); it('should select default', function() { select('selection').option('other'); expect(element('.doc-example-live [ng-switch]').text()).toMatch(/default/); });